<template>
  <Page header="发布任务" :isBack="true">
    <div style="display: flex;flex-direction: column;height: 100%;overflow:hidden;">
      <div style="flex-grow: 1;overflow:hidden ">
        <scroll-view scroll-y="true" style="height: 100%">
          <div class="detail-card">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">任务信息</div>
              </div>
              <div class="card-body" style="padding:0 24rpx">
                <u-form :model="taskDetail" ref="uForm"  label-position="left" label-width="120px">
                  <u-form-item label="任务标题" props="name">
                    <u-input input-align="right" v-model="taskDetail.name"/>
                  </u-form-item>
                  <u-form-item label="任务要求" props="description">
                    <u-input input-align="right" v-model="taskDetail.description" type="textarea"/>
                  </u-form-item>
                  <u-form-item label="备注" props="remark">
                    <u-input input-align="right" v-model="taskDetail.remark" type="textarea" pleacholder="仅自己可见"/>
                  </u-form-item>
                  <u-form-item label="任务数量" props="count">
                    <u-input input-align="right" v-model="taskDetail.count" type="number" pleacholder="最小为1个" :min="1"/>
                  </u-form-item>
                  <u-form-item label="单价" props="price">
                    <u-input input-align="right" v-model="taskDetail.price" type="number" pleacholder="最小为0.1" :min="0.1"/>
                  </u-form-item>
                  <u-form-item label="任务截止时间">
                    <u-input input-align="right" v-model="taskDetail.end_time" type="select" @click="endDateShow = true"/>
                  </u-form-item>
                </u-form>
              </div>
            </div>
          </div>
          <div class="detail-card" v-for="(item,index) in stepList" :key="index">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">任务步骤{{ index + 1}}</div>
              </div>
              <div class="card-body" style="padding:0 24rpx">
                <div class="step-list">
                  <div class="step-wrapper">
                   <!-- 图文  -->
                    <div class="step-item">
                      <u-cell-item :border-bottom="false" :title="getTypeName(item.type)" @click="openTypeShow(item, index)">
                      </u-cell-item>
                      <div class="input-border">
                        <u-input
                            placholder="请输入步骤说明"
                            border input-align="left" v-model="item.description" type="textarea"/>
                      </div>
                      <u-upload style="margin: 12rpx 0"
                                width="315rpx" height="750rpx"
                        v-if="item.type !== 2 && item.type !== 10"
                                :action="action" max-count="99" :file-list="fileList" @on-success="(e) => successFile(item, e)" @on-remove="(e) => removeFile(item,e)"></u-upload>

                     <div
                         v-if="item.type !== 2 && item.type !== 10"
                         style="display: flex;align-items: center;padding: 0 0 24rpx 0">
                       <u-switch v-model="item.checked"></u-switch>
                       设置为验证图
                     </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
      <div class="button-group" style="padding-bottom: 0;flex-shrink: 0;display: flex;align-items: center;justify-content: space-around">
        <div class="primary-button large" style="width: 100%;" @click="addStep">添加步骤</div>
      </div>
      <div class="button-group" style="flex-shrink: 0;display: flex;align-items: center;justify-content: space-around">
        <div class="primary-button large" style="width: 100%;background-color: red" @click="submitTaskRecord">发布</div>
      </div>
      <u-picker
          :params="{
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true,
          // 选择时间的时间戳
          timestamp: true,
          }"
          mode="time" v-model="endDateShow" @confirm="changeEndDate"></u-picker>
      <u-picker
          v-model="typeShow"
          range-key="name"
          :default-selector="[currenTypeIndex]"
          :range="typeList"
          @confirm="changeType"
          mode="selector"></u-picker>
    </div>
  </Page>
</template>
<script>
import Page from "../../components/Page.vue";
import { mapGetters } from 'vuex';
import dayjs from "dayjs";
export default {
  name: "index",
  components: {Page},
  data() {
    return {
      taskDetail: {
        name: '',
        description: '',
        remark: '',
        count: 1,
        price: 0.1,
        end_time: '',
      },
      action: this.$baseUrl + '/api/upload/file',
      fileList: [],
      endDateShow: false,
      typeShow: false,
      typeList: [
          // 图文、打开指定网址、下载APP、扫描二维码、输入邀请码、复制文字内容、添加多张图片、输入验证口令、收集截屏或者图片、收集文字
          {name: '图文', value: 1},
          {name: '打开指定网址', value: 2},
          {name: '下载APP', value: 3},
          {name: '扫描二维码', value: 4},
          {name: '输入邀请码', value: 5},
          {name: '复制文字内容', value: 6},
          {name: '添加多张图片', value: 7},
          {name: '输入验证口令', value: 8},
          {name: '收集截屏或者图片', value: 9},
          {name: '收集文字', value: 10},
      ],
      currenType: 1,
      stepIndex: 0,
      stepList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    currenTypeIndex() {
      return this.typeList.findIndex(item => item.value === this.currenType)
    }
  },
  onLoad() {
    this.addStep()
  },
  methods: {
    changeType(e) {
      let index = e[0]
      this.typeShow = false
      this.stepList[this.stepIndex].type = this.typeList[index].value
    },
    openTypeShow(item,index) {
      this.typeShow = true
      this.currenType = item.type
      this.stepIndex = index
    },
    getTypeName(type) {
      return this.typeList.find(item => item.value === type).name
    },
    changeEndDate(e) {
      console.log(e)
      this.taskDetail.end_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
    },
    addStep() {
      this.stepList.push({
        type: 1,
        fileList: [],
        description: '',
        fileListValue: [],
        textValue: '',
        checked: true
      })
    },
    successFile(item, e) {
      item.fileList.push(e.data.url)
      console.log(item)
    },
    removeFile(item,index) {
      item.fileList.splice(index, 1)
      console.log(item)
    },
    viewImage(file) {
      console.log('viewImage', file)
      uni.previewImage({
        urls: [file]
      })
    },
    submitTaskRecord() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          showCancel: true,
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/user/login'
              })
            }
          }
        })
        return
      }
      if (this.userInfo.role !== 1) {
        uni.showToast({
          title: '您不是管理员，无法发布任务',
          icon: 'none'
        })
        return
      }
      // 校验
      if (!this.taskDetail.name) {
        uni.showToast({
          title: '请输入任务标题',
          icon: 'none'
        })
        return
      }
      if (!this.taskDetail.count) {
        uni.showToast({
          title: '请输入任务数量',
          icon: 'none'
        })
        return
      }
      if (!this.taskDetail.price) {
        uni.showToast({
          title: '请输入单价',
          icon: 'none'
        })
        return
      }
      if (!this.taskDetail.end_time) {
        uni.showToast({
          title: '请选择任务截止时间',
          icon: 'none'
        })
        return
      }
      if (this.stepList.length === 0) {
        uni.showToast({
          title: '请添加任务步骤',
          icon: 'none'
        })
        return
      }
      let that = this
      // 确认对话框
      uni.showModal({
        title: '提示',
        content: '确认发布吗？',
        showCancel: true,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            uni.showLoading({
              title: '加载中',
              mask: true,
              duration: 0
            })
            that.$api.createTask({
              ...that.taskDetail,
              amount: that.taskDetail.price * that.taskDetail.count,
              step_list: JSON.stringify(that.stepList)
            }).then(res => {
              uni.showToast({
                title: '发布成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1000)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
  }

}
</script>

<style lang="scss">
.page {
  .u-input {
    text-align: right;
  }
  .input-border {
    padding: 12rpx;
  }
  .add-box {
    margin: 0 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #05C8CE;
    padding: 18rpx;
    border-radius: 12rpx;
    color: #ffffff;
  }
  .avatar-list {
    .avatar-item {
      width: 160rpx;
      height: 160rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .detail-card {
    margin: 20rpx;
    border-radius: 24rpx;
    background-color: #ffffff;
  }

  .card {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16rpx;

    .card-header {
      height: 128rpx;
      padding-left: 12rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #E6E6E6;

      .line {
        width: 8rpx;
        height: 36rpx;
        background-color: #05C8CE;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #303030;
        text-align: left;
        padding-left: 20rpx;
        font-style: normal;
        text-transform: none;
        flex-grow: 1;
      }

    }

    .card-body {
      .item {
        padding: 50rpx;
      }

      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30rpx;
      }
    }
  }

  .file-list {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;

    .file-info {
    }

    .file-item {
      margin-right: 20rpx;
      margin-top: 20rpx;
      width: 120rpx;
      height: 160rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .pdf {
        width: 50px;
        height: 50px;
      }

      .preview,
      .download {
        width: 14px;
        height: 13px;
        margin-top: 12rpx;
        //position: absolute;
        //right: 4px;
        //top: 50%;
        //transform: translateY(-45%);
      }

      .preview {
        width: 18px;
        height: 18px;
        right: 28px;
      }

      .file-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .file-name {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 16px;
          color: #262626;
          padding-right: 40px;
        }

        .file-size {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 14px;
          color: #9D9D9D;
          padding-right: 40px;
        }

        .file-line {
          width: 100%;
          height: 2px;
          opacity: 1;
          background: #EBEBEB;
        }
      }
    }
  }

}
</style>
